<!-- @format -->

<template>
  <div id="FootNav">
    <van-tabbar v-model="active" route>
      <van-tabbar-item class="iconfont icon-zhinanzhen" to="/">
        首页</van-tabbar-item
      >
      <van-tabbar-item
        class="iconfont icon-leimupinleifenleileibie2"
        to="/Class"
        >分类</van-tabbar-item
      >
      <van-tabbar-item class="iconfont icon-gwc" to="/ShopCart"
        >购物袋</van-tabbar-item
      >
      <van-badge
        :content="shopcart.count"
        style="width: 17px;height: 17px;padding: 0px;left: 236px;position: absolute;"
      />
      <van-tabbar-item class="iconfont icon-geren5" to="/UserCenter"
        >个人中心</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "FootNav",
  components: {},
  props: {},
  data() {
    return {
      active: 0
    };
  },
  computed: {
    /* sumcount() {
      console.log(this.$store.state.shopcart.count);
      return this.$store.state.shopcart.count;
    }, */
    ...mapState(["shopcart"])
  },
  watch: {},
  created() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.iconfont::before {
  font-size: 18px;
}
.van-tabbar-item--active {
  color: rgb(48, 210, 189);
}
</style>
